'use client'

import Header from '@/app/components/Header'
import FeatureSection from '@/app/components/FeatureSection'
import InstallationSection from '@/app/components/InstallationSection'
import ScreenshotSection from '@/app/components/ScreenshotSection'
import CtaSection from '@/app/components/CtaSection'

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white">
      <Header />
      
      {/* Hero Section */}
      <section className="container mx-auto px-4 py-16 md:py-24">
        <div className="flex flex-col items-center text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-6">
            Network Console <span className="text-blue-400">Edge插件</span>
          </h1>
          <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl">
            专为Microsoft Edge浏览器设计的网络请求调试工具，提供类似DevTools网络面板的功能
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            <a 
              href="https://microsoftedge.microsoft.com/addons/detail/lgkemdinjnjaphnbkmmcnejbefeapkfd" 
              target="_blank" 
              rel="noopener noreferrer"
              className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300"
            >
              安装插件
            </a>
            <a 
              href="https://gitee.com/bigfanshu/NetworkConsole" 
              target="_blank" 
              rel="noopener noreferrer"
              className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300"
            >
              查看源码
            </a>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features">
        <FeatureSection />
      </section>

      {/* Screenshots Section */}
      <section id="screenshots">
        <ScreenshotSection />
      </section>

      {/* Installation Section */}
      <section id="installation">
        <InstallationSection />
      </section>

      <CtaSection />
      
      {/* Footer */}
      <footer className="bg-gray-800 py-8">
        <div className="container mx-auto px-4 text-center text-gray-400">
          <p>© {new Date().getFullYear()} Network Console. 由超大只番薯开发.</p>
        </div>
      </footer>
    </div>
  )
}